<template>
  <div class="detailBox">
    <div class="detailTop">
      <div>
        <img
          v-imgerr="require('@/assets/common/bug.png')"
          :src="sizeForm.user.staffPhoto"
          width="100"
          height="100"
          alt
        >
      </div>
      <div>
        <b>{{ sizeForm.user.username }}</b>
        <span :class="dutyStatus?'job-txt-green':'job-txt-red'">{{ dutyStatusTxt }}</span>
        <br>
        <p>
          <span>最新工资基数 {{ sizeForm.salaryBase }}  </span>
          &emsp;&emsp;
          <span>入职时间   {{ sizeForm.user.timeOfEntry | formatDate }}</span>
          &emsp;&emsp;
          <span>联系电话 {{ sizeForm.user.mobile }}</span>
        </p>
        <br>
        <p>
          本月不缴纳社保
          <el-switch v-model="isPaySocialInMonth" active-color="#13ce66" inactive-color="#ff4949" />&emsp;&emsp;
          本月不缴纳公积金
          <el-switch
            v-model="isPayProvidentInMonth"
            active-color="#13ce66"
            inactive-color="#ff4949"
          />
        </p>
      </div>
    </div>
    <!-- 放表格 -->
    <detailTable :size-form="sizeForm" :payment-item-list="paymentItemList" :city-list="cityList" />
  </div>
</template>

<script>
import { getContent, getCityList, getPaymentItemList } from '@/api/social'
import detailTable from './components/detail-table'
export default {
  components: {
    detailTable
  },
  data() {
    return {
      sizeForm: {
        user: {},
        userSocialSecurity: {
          // socialSecurityBase: 3387,
          // industrialInjuryRatio: 0.2
        }
      },
      cityList: [],
      paymentItemList: [],
      isPaySocialInMonth: false, // 本月不缴纳社保
      isPayProvidentInMonth: false //  本月不缴纳公积金
    }
  },
  computed: {
    // 在职、 离职 ==>判断
    dutyStatusTxt() {
      return this.sizeForm.user.inServiceStatus === 1 ? '在职' : '离职'
    },
    // 在职则 inServiceStatus = 1 ，返回 true
    dutyStatus() {
      return this.sizeForm.user.inServiceStatus === 1
    },
    // 监听
    watch: {
    // 监听 本月是否缴纳社保
      'sizeForm.userSocialSecurity.enterprisesPaySocialSecurityThisMonth': function() {
        this.isPaySocialInMonth = this.sizeForm.enterprisesPaySocialSecurityThisMonth === 1
      },
      // 本月是否缴纳公积金
      'sizeForm.userSocialSecurity.enterprisesPayTheProvidentFundThisMonth': function() {
      // 从拿到的数据中判断 是否缴纳，缴纳则将 switch 置为 true，否则置为 false
        this.isPayProvidentInMonth = this.sizeForm.enterprisesPayTheProvidentFundThisMonth === 1
      }
    }
    // computeEnterpriseProvidentFundPayment() {
    //   return parseFloat(
    //     (this.sizeForm.userSocialSecurity.enterpriseProportion * this.sizeForm.userSocialSecurity.providentFundBase) /
    //       100
    //   ).toFixed(2)
    // },
    // computePersonalProvidentFundPayment() {
    //   return parseFloat(
    //     (this.sizeForm.userSocialSecurity.personalProportion * this.sizeForm.userSocialSecurity.providentFundBase) /
    //       100
    //   ).toFixed(2)
    // }
  },
  created() {
    // this.sizeForm.userId = this.$route.params.id // 拿到当前员工的 id
    // 根据用户id查询用户的社保数据
    this.getContent()
    // 获取社保城市
    this.getCityList()
  },
  methods: {
    // 获取社保城市
    async getCityList() {
      this.cityList = await getCityList()
      // console.log(this.cityList)
    },
    async getContent() {
    // 根据用户id查询用户的社保数据
      this.sizeForm = await getContent(this.$route.params.id)
      // 获取参保城市
      const data = await getCityList(this.sizeForm.userSocialSecurity.participatingInTheCityId)
      // 参保城市
      const city = {}
      city.name = data[0].name
      city.id = data[0].id
      // console.log(city)
      this.initPaymentItem(city.id)
      // if (data.userSocialSecurity) {
      //   this.sizeForm = data
      //   this.sizeForm.userId = this.$route.params.id
      //   const city = {}

      //   this.initPaymentItem(city)
      // } else {
      //   this.sizeForm.user = data.user
      // }
    },
    // 根据城市id查询参保城市的参保项目
    async initPaymentItem(id) {
      this.paymentItemList = await getPaymentItemList(id)
      console.log(this.paymentItemList)
    }

  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.detailBox {
  margin: 20px;
  .detailTop {
    background: #fff;
    padding: 15px;
    display: flex;
    img {
      border-radius: 50%;
      margin-right: 40px;
      box-shadow: 1px 2px 4px #cccccc;
    }
  }
}
.job-txt-green,
.job-txt-red {
  display: inline-block;
  padding: 3px;
  border-radius: 3px;
  font-size: 12px;
  color: #fff;
}
.job-txt-green {
  background: #67c23a;
  //   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.job-txt-red {
  //   padding: 20px;
  background: #f56c6c;
  //   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>
